import React from "react";
import { Avatar, Button, Card, List, NavBar, ResultPage } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import styles from "./Index.module.css";
function Index() {
  const nav = useNavigate();
  const user = localStorage.getItem("nickName");
  const userID = localStorage.getItem("userId");
  return (
    <div className={styles.myzong}>
      <div className={styles.header}>
        <div className={styles.nav}>
          <NavBar onBack={() => nav("/home")}></NavBar>
        </div>

        <div className={styles.tu}>
          <img src="/bail.png" alt="" />
        </div>
      </div>

      <div className={styles.user}>
        {userID ? (
          <div className={styles.toux}>
            <Avatar src="" style={{ "--border-radius": "50%" }} />
            <div style={{ marginLeft: "49px", marginTop: "-30px" }}>{user}</div>
          </div>
        ) : (
          <Button onClick={() => nav("/login")}>去登录</Button>
        )}

        <div className={styles.btn}>
          <Button style={{ color: "blue", width: "80px", marginLeft: "-98px" }}>
            签到
          </Button>
        </div>
      </div>

      <div className={styles.vvv}>
        <ResultPage.Card className={styles.card}>
          <p style={{ fontSize: "17px", marginTop: "10px" }}>我的问诊</p>
          <div className={styles.lisrz}>
            <List className={styles.list}>
              <List.Item
                prefix={
                  <img
                    src="/yis.png"
                    alt=""
                    style={{ width: "40px", height: "40px" }}
                  />
                }
                onClick={() => {}}
              >
                当前问诊
              </List.Item>
              <List.Item
                prefix={
                  <img
                    src="/phone.png"
                    alt=""
                    style={{ width: "40px", height: "40px" }}
                  />
                }
                onClick={() => {}}
              >
                历史问诊
              </List.Item>
            </List>
          </div>
        </ResultPage.Card>
      </div>

      <div className={styles.xia}>
        <div className={styles.hez}>
          <dl>
            <ul>
              <img src="./user.png" alt="" />
            </ul>
            <li>我的档案</li>
          </dl>
        </div>

        <div className={styles.hez}>
          <dl onClick={() => nav("/qian")}>
            <ul>
              <img src="./qian.png" alt="" />
            </ul>
            <li>我的钱包</li>
          </dl>
        </div>

        <div className={styles.hez}>
          <dl onClick={() => nav("/shoulist")}>
            <ul>
              <img src="./shouda.png" alt="" />
            </ul>
            <li>我的收藏</li>
          </dl>
        </div>

        <div className={styles.hez}>
          <dl>
            <ul>
              <img style={{ marginLeft: "10px" }} src="./youh.png" alt="" />
            </ul>
            <li>被采纳建议</li>
          </dl>
        </div>

        <div className={styles.hez}>
          <dl>
            <ul>
              <img src="./shi.png" alt="" />
            </ul>
            <li>我的视频</li>
          </dl>
        </div>

        <div className={styles.hez}>
          <dl>
            <ul>
              <img style={{ marginLeft: "10px" }} src="./cong.png" alt="" />
            </ul>
            <li>我的病友圈</li>
          </dl>
        </div>

        <div className={styles.hez}>
          <dl>
            <ul>
              <img style={{ marginLeft: "10px" }} src="./ai.png" alt="" />
            </ul>
            <li>我的关注</li>
          </dl>
        </div>

        <div className={styles.hez}>
          <dl>
            <ul>
              <img style={{ marginLeft: "8px" }} src="./ren.png" alt="" />
            </ul>
            <li>我的任务</li>
          </dl>
        </div>

        <div className={styles.hez}>
          <dl onClick={() => nav("/set")}>
            <ul>
              <img src="./set.png" alt="" />
            </ul>
            <li>设置管理</li>
          </dl>
        </div>
      </div>
    </div>
  );
}

export default Index;
